import React, { Component } from "react";
import type { MouseEvent } from "react";
import "./App.css";

interface Props {}

interface User {
  id: string;
  text: string;
}
interface Content {
  id: string;
  content: string;
}
interface State {
  ButtonArray: User[];
  ContentArray: Content[];
  Now: number;
  X: number;
  Y: number;
}

class App extends Component<Props, State> {
  private x: number;
  private y: number;
  private disX: number;
  private disY: number;

  constructor(props: Props) {
    super(props);

    this.state = {
      ButtonArray: [
        { id: "t1", text: "首页" },
        { id: "t2", text: "新闻" },
        { id: "t3", text: "军事" },
      ],
      ContentArray: [
        { id: "c1", content: "首页的内容" },
        { id: "c2", content: "新闻页的内容" },
        { id: "c3", content: "军事页的内容" },
      ],
      Now: 0,
      X: 0,
      Y: 0,
    };
    this.x = 0;
    this.y = 0;
    this.disX = 0;
    this.disY = 0;
  }

  changeCurrent(index: number): void {
    this.setState({
      Now: index,
    });
  }

  FnDown(e: any) {
      this.disX = e.clientX - e.target.offsetLeft;
      this.disY = e.clientY - e.target.offsetTop;
      e.target.onmousemove = this.FnMove.bind(this)
      e.preventDefault && e.preventDefault(); 


    // onmousemove = {()=>this.FnMove}
  }

  FnMove(e: MouseEvent) {
      this.x = e.clientX - this.disX;
      this.y = e.clientY - this.disY;
      
      this.setState({
        X: this.x,
        Y: this.y,
      });

  }

  FnUP(e: any): void {
    e.target.onmousemove = null;
    e.target.onmouseup = null;
  }

  render() {
    let ButtonArray = this.state.ButtonArray;
    let ContentArray = this.state.ContentArray;
    let Now = this.state.Now;

    return (
      <div>
        <div className="tags">
          <ul>
            {ButtonArray.map((item, index) => (
              <li
                key={item.id}
                className={Now === index ? "active" : ""}
                onClick={this.changeCurrent.bind(this, index)}
              >
                {item.text}
              </li>
            ))}
          </ul>
          {ContentArray.map((item, index) => (
            <div className={Now === index ? "active" : ""} key={item.id}>
              {item.content}
            </div>
          ))}
        </div>

        <div
          className="box"
          style={{ left: this.state.X, top: this.state.Y }}
          onMouseDown={this.FnDown.bind(this)}
          onMouseUp={this.FnUP.bind(this)}
        ></div>
      </div>
    );
  }
}
export default App;
